<script setup>
    import store from '../../store';

    const modalHidden = () => {
        store.dispatch('modalCancel')
    }

    const handleOk = async () => {
        let response = await store.state.confirm.options.onOk()
        if(response !== false) modalHidden()
    }

    const handleCancel = async () => {
        let response = await store.state.confirm.options.onCancel()
        if(response !== false) modalHidden()
    }
</script>

<template>
    <a-modal
        v-model:visible="store.state.confirm.visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :footer="null"
        class="ant-modal-confirm ant-modal-confirm-confirm"
        :centered="store.state.confirm.options.centered"
        :closable="store.state.confirm.options.closable"
        :width="store.state.confirm.options.width"
    >
        <div class="ant-modal-confirm-body-wrapper">
            <div class="ant-modal-confirm-body">
                <component :is="store.state.confirm.options.icon" v-if="store.state.confirm.options.icon"></component>
                <span class="ant-modal-confirm-title" v-if="store.state.confirm.options.title">{{ store.state.confirm.options.title() }}</span>
                <div class="ant-modal-confirm-content" v-if="store.state.confirm.options.content">{{ store.state.confirm.options.content() }}</div>
            </div>
            <div class="ant-modal-confirm-btns">
                <a-button @click="handleCancel">{{ store.state.confirm.options.cancelText }}</a-button>
                <a-button :type="store.state.confirm.options.okType" @click="handleOk">{{ store.state.confirm.options.okText }}</a-button>
            </div>
        </div>
    </a-modal>
</template>